<template>
<div class="registerPage">
  <JdNavbar title='购物车' @skip='login'></JdNavbar>

  <van-form @submit="onSubmit">
    <van-field
      v-model="username"
      name="用户名"
      label="用户名"
      placeholder="用户名"
      :rules="[{ required: true, message: '请填写用户名' }]"
    />
    <van-field
      v-model="password"
      type="password"
      name="密码"
      label="密码"
      placeholder="密码"
      :rules="[{ required: true, message: '请填写密码' }]"
    />
    <van-field
      v-model="password2"
      type="password"
      name="密码"
      label="密码"
      placeholder="密码"
      :rules="[{ required: true, message: '请确认密码' }]"
    />
    <div style="margin: 16px;">
      <van-button round block type="info" native-type="submit">注册</van-button>
    </div>
  </van-form>
</div>
</template>

<script>
import {
  JdNavbar
} from '@/components'

export default {
  name: '',
  data() {
    return {
      username: '',
      password: '',
      password2: ''
    }
  },

  components: {
    JdNavbar,
  },

  methods: {
    onSubmit() {
      const data = {
        username: this.username,
        password: this.password,
        comfirm_pwd: this.password2
      }
      // 判断用户输入密码是否一致
      if (this.password.trim() !== this.password2.trim()) {
        return this.$dialog.alert({
          title: '温馨提示',
          message: '两次输入密码不一致，请核对后重新输入'
        })
      }
      // 在验证成功后调用接口
      this.$api.isRegister(data).then(res => {
        if (res) {
          this.$dialog.success({
            title: '成功提示',
            message: '注册成功',
            theme: 'round-button'
          }).then(() => {
            this.$router.replace('/login')
          })
        }
      })
    },

    login () {
      this.$router.back()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>